<template>
    <div>
      <div class="header">
         <portal-header course="精品课程网站"></portal-header>
      </div>
        <div class="container" >
          <div class="allCourse">
            <div class="responsive"><!--allCourses.supports,避免在没有数据的时候显示解析（有数据才解析）

                                                                    有数据的时候div才存在，用v-if控制一下-->
              <el-table
                :data="allCourses"
                style="height: 100%"
                row-style="width:800px">

                <el-table-column
                label="描述图片"
                prop="courseImageUrl"
                min-width="500">
                  <template slot-scope="scope">
                    　　<img :src="scope.row.courseImageUrl" width="40" height="40">
                  </template>
                </el-table-column>

                <el-table-column
                label="课程名"
                prop="courseName"
                min-width="200">
                  <template slot-scope="scope">
                    <el-button  @click="getCourseId(scope.row.courseId)"size="small">{{scope.row.courseName}}</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      <portal-footer></portal-footer>
    </div>
</template>

<script>
    import PortalFooter from "../../components/coursePortal/PortalFooter";
    import PortalHeader from "../../components/coursePortal/PortalHeader";
    import {HomePageService} from "./HomePageService";

    export default {
      name: "homePage",
      components: {PortalHeader, PortalFooter},
      data(){
        return{
          allCourses:[],
        }
      },
      created: function () {
        this.findAllCourses();
      },
      methods:{
        findAllCourses(){
          HomePageService.findAllCourses().then(res => {
            this.allCourses = res.data;
            console.log(this.allCourses)
          })
          // }).catch(() => {
          //   this.$message({
          //     type: 'error',
          //     message: '查询失败，请稍后再试！'
          //   })
          // })
        },
        getCourseId(courseId){
          this.$router.push({
            path:'/courseIntroduction',
            name:'courseIntroduction',
            params:{
              courseId:courseId,
            }
          })
          console.log(courseId);
        }
      }
    }
</script>

<style slot-scoped>
.container{
  width:70%;
  height:600px;
  background-color: aliceblue;
  margin:0 auto;
}
.allCourse {
  margin: 5px;
  width: 800px;
  padding-left: 40px;
}

/*.allCourse:hover {
  border: 1px solid #777;
}*/

.allCourse img {
  width: 100%;
  height: auto;
}

/deep/.header/deep/.portal-header_search{
  padding-top: 40px;
}
</style>
